<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        background-color: #fff;
        color: #333;
        font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      * {
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <form action="/">
      <div class="form-group">
        <label for="username"> 用户名: </label>
        <input
          type="text"
          name="username"
          id="username"
          required
          minlength="5"
          maxlength="20"
          pattern="[a-z]{1}\.[a-z0-9]{3,}"
        />
      </div>
      <div class="form-group">
        <label for="email">邮箱: </label>
        <input
          type="email"
          name="email"
          id="email"
          required
          pattern="[A-z0-9]{1,}@bigcorp.eu"
        />
      </div>
      <div class="form-group">
        <label for="phone">手机号: </label>
        <input
          type="text"
          name="phone"
          id="phone"
          required
          minlength="10"
          pattern="[0-9]{10}|[0-9]{3}[\-. ][0-9]{3}[\-. ][0-9]{4}"
        />
      </div>
      <div class="form-group">
        <label for="comment">评论: </label>
        <textarea
          name="comment"
          id="comment"
          maxlength="200"
          required
        ></textarea>
      </div>
      <div class="form-group">
        <button type="submit">提交</button>
      </div>
    </form>
    <script>
      // 获取邮箱输入框元素
      const email = document.getElementById("email");

      // 监听输入框的 input 事件（每次输入变化时触发）
      email.addEventListener("input", function (e) {
        // 检查邮箱格式是否有效（基于 type="email" 的验证）
        if (email.validity.typeMismatch) {
          email.setCustomValidity("I am expecting an e-mail address!");
        }
        // 检查输入长度是否过短
        else if (email.validity.tooShort) {
          email.setCustomValidity("Your e-mail address is too short!!");
        }
        // 验证通过时清除错误提示
        else {
          email.setCustomValidity("");
        }
      });
    </script>
  </body>
</html>
